<template>
    <div class="container">
        <div class="login-head">登录</div>
        <div class="login-main">
            <div class="login-body">
                <div class="login-form">
                    <input class="login-account" id="loginAccount" type="text" placeholder="手机号/邮箱/用户名" v-model="account"/>
                    <div class="sms-login" v-if="type==false">
                        <input class="sms-input" type="text" placeholder="请输入验证码" v-model="smsCode">
                        <div class="sms-get" style="cursor: pointer" @click="getSmsCode(5)" v-if="waitTime == 0">获取验证码</div>
                        <div class="sms-get" v-if="waitTime != 0">{{waitTime}}秒后再次获取</div>
                    </div>
                    <div class="pwd-login" v-if="type==true">
                        <input class="login-password" type="password" placeholder="请输入密码" v-model="form.loginPwd"/>
                    </div>
                </div>
                <div class="login-select">
                    <Checkbox class="rememberMe" v-model="form.rememberMe">记住我</Checkbox>
                    <div class="type" v-if="type==true" @click="changeType">短信验证登录</div>
                    <div class="type" v-if="type==false" @click="changeType">账号密码登录</div>
                </div>
                <div style="text-align: center">
                        <Button long class="login-buuton" @click="doLogin">登录</Button>
                    <div class="reset-link"><router-link to="reset" style="color: cadetblue;text-align: center">忘记密码？</router-link></div>
                        <Divider size="small" class="divider">第三方应用登录</Divider>
                        <div class="oauth">
                            <a href="/user/github">
                            <img class="imgCss" src="../../../assets/loginPic/github.png" ></a>
                        </div>
                </div>
            </div>
        </div>
        <div class="register-foot">
            <div class="register-tips">没有账号？</div>
            <router-link to="register" style="color: cadetblue">注册</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login.vue",
        data(){
            return{
                imageCode:'',
                deviceId:'',
                account:'',
                type:true,
                waitTime:0,
                smsCode: '',
                form: {
                    loginName:'',
                    loginPwd:'',
                    rememberMe:'',
                }
            }
        },
        methods:{
            doLogin(){
                let validateResult = this.formValidate();
                console.log(validateResult.status);
                if(this.$store.getters.getLoginName == this.form.loginName && this.$store.getters.getPassword==this.form.loginPwd){
                    this.$router.push('/main')
                }
            },

            formValidate () {
                let result = {
                    status:false,
                    type:'',
                    msg:''
                };
                if (/\s/.test(this.form.loginName.trim())||this.form.loginName=='') {
                    result.msg = '用户名不能为空';
                    return result;
                }
                if (/\s/.test(this.form.loginPwd)||this.form.loginPwd=='') {
                    result.msg = '密码不能为空';
                    return result;
                }
                if(/0?(13|14|15|18|17)[0-9]{9}/.test(this.form.loginName)){
                    result.type = 'cell-phone';
                    result.status = true;
                    return result;
                }
                if(/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(this.form.loginName)){
                    result.type = 'email';
                    result.status = true;
                    return result;
                }
                // 通过验证，返回正确提示
                result.status = true;
                result.type = 'user-name';
                result.msg = '验证通过';
                return result;
            },
            getSmsCode(wait){
                let _this =this;
                this.waitTime = wait;
                _this.getSeconds()
            },
            getSeconds(){
                let _this =this
                if(this.waitTime == 0);
                else {
                    this.waitTime--;
                    setTimeout(function() {
                            _this.getSeconds();
                        },
                        1000);
                }
            },
            changeType(){
                this.type = !this.type;
                let ph;
                if(this.type){
                    ph = '手机号/邮箱/用户名'
                }else{
                    ph = '请输入手机号'
                }
                document.querySelector('#loginAccount').placeholder= ph
            }
        }
    }
</script>

<style scoped>
    .login-head{
        font-size: 24px;
        color: #808083;
        text-align: center;
        margin-top: 50px;
    }
    .login-main{
        position: relative;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 10px 0;
    }
    .login-body{
        background: #ffffff;
        max-width: 384px;
        margin: 0px auto 28px auto;
        border: 1px solid #dedede;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        text-align: left;
    }
    .login-form{
        margin: 30px;
        margin-bottom: 24px;
        text-align: center;
    }
    input {
        text-align: left;
        text-indent: 13px;
        font-size: 14px;
        color: #000;
        width: 300px;
        height: 40px;
        border: 1px solid #cacaca;
        border-radius: 6px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        outline-width: 3px;
        outline-color: rgba(38,95,131,0.93);
    }
    .login-password{
        margin-top: 17px;
    }
    .sms-login{
        margin-top: 17px;
        width: 300px;
        height: 40px;
        position: relative;
        left: 50%;
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
    }
    .sms-input{
        left: 0;
        width: 160px;
        position: relative;
        float: left;
    }
    .sms-get{
        left: 187px;
        width: 150px;
        height: 40px;
        position: absolute;
        line-height: 40px;
        font-size: 14px;
        text-align: left;
    }
    .login-select{
        margin-left: 41px;

    }
    .rememberMe{
        float: left;
        height: 14px;
        width: 120px;
        font-size: 13px;
    }
    .type{
        float: right;
        cursor: pointer;
        color: cadetblue;
        margin-right: 41px;
    }

    .login-buuton{
        margin-top: 10px;
        width: 300px;
        height: 40px;
        background-color: rgba(38, 95, 131, 0.93);
        color: white;
    }
    .reset-link{
        text-align: center;
        margin-top: 20px;
    }
    .divider{
        padding-top: 0px;
        font-size: 8px;
        color: #808083;
        letter-spacing: -.09px;
        position: relative;
    }

    .oauth{
        cursor: pointer;

    }
    .imgCss{
        height: 40px;
        width: 40px;
    }
    .register-foot{
        margin-top: 30px;
        text-align: center;
    }

</style>
